<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
		var time = 0;
		onload = function(){
			var d = new Date();
			time_h1.innerText = d.toLocaleTimeString();
		}
		setInterval(function(){
			var d = new Date();
			time_h1.innerText = d.toLocaleTimeString();

		},1000);
		
		function myfn(){
			//禁止按钮点击
			
			//得到用户输入的时间
			time = parseInt(i1.value);
			//显示
			btn.disabled = true;
			time_h2.innerText =getTimeString(time);
			//开启定时器倒计时
			var t = setInterval(function(){
				time--;
				time_h2.innerText = getTimeString(time);
				if(time==0){
					clearInterval(t);
					
					//恢复按钮点击
					btn.disabled = false;
					alert("时间到");
				}
			},1000);
		}
		
		
		function getTimeString(time){
			//得到小时
			var h = parseInt(time/3600);
			//得到分钟
			var x = time%3600;
			var m = parseInt(x/60);
			//得到秒
			var s = x%60;
			//不足两位则补0
			h = h<0?"0"+h:h;
			m = m<0?"0"+m:m;
			s = s<0?"0"+s:s;
			return h+":"+m+":"+s;
		}
		</script>
	</head>
	<body>
	<input type ="text" id="i1">
	<input id="btn" type = "button" value = "倒计时" onclick="myfn()">
	<hr>
		<h1 id="time_h2"></h1>
		<h1 id="time_h1"></h1>
	</body>
</html>